<template>
  <view class="page-wrap">
    <uni-nav-bar
      title="邀请好友"
      color="#fff"
      backgroundColor="transparent"
      :border="false"
      :statusBar="true"
      :fixed="true"
      @clickLeft="$c.back()"
    >
      <view class="uni-nav-bar-l-icon" slot="left">
        <view class="uni-nav-bar-l-icon-left icon">
          <image :src="$img('/static/img2/cc20.png')" lazy-load></image>
        </view>
      </view>
    </uni-nav-bar>

    <view
      @click="$refs.rulePop.getRule(11, '规则说明')"
      class="rule-btn"
      :style="{
        top: `calc(130rpx + ${$sys().statusBarHeight}px)`
      }"
    >
      <image :src="$img('/static/img2/cc41.png')" lazy-load></image>
    </view>

    <view class="page-hd">
      <image :src="$img('/static/img2/cc37.png')" lazy-load></image>
    </view>

    <!-- <mescroll-body
      ref="mescrollRef"
      :down="downOption"
      @init="mescrollInit"
      @down="downCallback"
      @up="upCallback"
    > -->
    <view
      class="money-list c_bg"
      :style="{
        backgroundImage: `url(${$img('/static/img2/cc38.png')})`
      }"
    >
      <view class="money-item l">
        <view class="num">{{ total }}</view>

        <view class="title">已邀请人数</view>
      </view>

      <view class="money-item r" @click="gotoPage('/pages/user/sy_jl')">
        <view class="num">{{ total }}</view>

        <view class="title">奖励总额</view>
      </view>

      <view class="right icon">
        <image :src="$img('/static/img2/cc39.png')" lazy-load></image>
      </view>
    </view>

    <view
      class="inv-btn relative c_bg"
      :style="{
        backgroundImage: `url(${$img('/static/img2/cc19.png')})`
      }"
    >
      <button class="hide" open-type="share"></button>

      邀请好友
    </view>

    <!-- <view
        class="card common_bg"
        :style="{
          'margin-top': `calc(710rpx - 88rpx - ${$sys().statusBarHeight}px)`,
          'background-image': `url(${$img('/static/img/1_invite_card.png')})`
        }"
      >
        <view class="people-money">
          <view class="people">
            <view>已邀请</view>
            <view class="num">
              {{ total }}
              <text>人</text>
            </view>
          </view>
          <view class="moneys">
            <view class="content" @click="gotoPage('/pages/user/sy_jl')">
              <view>奖励总额</view>
              <view class="money">
                {{ commission }}
                <text>元</text>
              </view>
            </view>
            <view class="icon">
              <image :src="$img('/static/img/right.png')" mode="scaleToFill" />
            </view>
          </view>
        </view>
        <button open-type="share" class="invite-btn">去邀请好友</button>
      </view> -->

    <view
      class="invite-log c_bg"
      :style="{
        backgroundImage: `url(${$img('/static/img2/cc40.png')})`
      }"
    >
      <view class="list-title">邀请记录</view>

      <mescroll-uni
        height="700rpx"
        ref="listScroll"
        @init="mescrollInit"
        @down="downCallback"
        @up="upCallback"
        :down="downOption"
      >
        <view class="list-wrap">
          <view v-for="(item, i) of listdata" :key="i" class="list-wrap-item">
            <view class="content">
              <view class="avatar">
                <image :src="item.headimg" mode="scaleToFill" />
              </view>
              <view class="info">
                <view class="info-hd">
                  <text class="name hang1" style="color: #fff">
                    {{ item.nickname }}
                  </text>
                  <text class="title">累计消费</text>
                </view>
                <view class="info-bd">
                  <text>{{ item.addtime }}</text>
                  <text class="money">¥{{ item.commission_money }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </mescroll-uni>
    </view>

    <rule-pop ref="rulePop"></rule-pop>
  </view>
</template>

<script>
export default {
  data() {
    return {
      downOption: {
        use: false
      },
      listdata: [],
      news: '',
      total: 0,
      logo_image: '',
      commission: 0
    }
  },
  onShareAppMessage() {
    let that = this
    return {
      title: '快来加入简单模玩~',
      // imageUrl: this.$img('/static/img/1_invite_bg.png'),
      path: '/pages/shouye/index?pid=' + uni.getStorageSync('userinfo').ID
    }
  },
  onLoad() {
    console.log(uni.getStorageSync('userinfo').ID)

    // setTimeout(() => {
    //   this.listdata = [
    //     {
    //       headimg: '/static/zzz.png',
    //       nickname:
    //         '名字名字名字名字名字名字名字名字名字名字名字名字名字名字名字名字名字名字',
    //       addtime: '2333-23-23 23:23:23',
    //       commission_money: 233.33
    //     },
    //     {
    //       headimg: '/static/zzz.png',
    //       nickname:
    //         '名字名字名字名字名字名字名字名字名字名字名字名字名字名字名字名字名字名字',
    //       addtime: '2333-23-23 23:23:23',
    //       commission_money: 233.33
    //     }
    //   ]
    // }, 1000)
  },
  methods: {
    /*下拉刷新的回调 */
    downCallback() {
      this.mescroll.resetUpScroll()
      // this.loadData(1)
    },
    /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
    upCallback(page) {
      //联网加载数据
      this.loadData(page.num)
    },
    loadData(pageNo) {
      // 模拟接口
      let that = this
      that.req({
        url: 'invitation',
        data: {
          page: pageNo
        },
        success(res) {
          that.total = res.data.count
          that.commission = res.data.money
          that.logo_image = res.data.share_image
          that.mescroll.endByPage(res.data.data.length, res.data.last_page)
          if (pageNo == 1) {
            that.listdata = res.data.data
          } else {
            that.listdata = that.listdata.concat(res.data.data)
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">
button::after {
  border: none;
}

button {
  background-color: transparent;
  padding-left: 0;
  padding-right: 0;
  line-height: inherit;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

image {
  width: 100%;
  height: 100%;
}

.page-wrap {
  width: 100vw;
  min-height: 100vh;
  background-size: 100% auto;
  box-sizing: border-box;
  color: #fff;
  padding: 0 0 40rpx;

  /deep/.uni-navbar__content {
    z-index: 998;
  }

  .page-hd {
    margin: 20rpx auto 0;
    width: 698rpx;
    height: 214rpx;
  }

  .rule-btn {
    position: absolute;
    right: 0;
    width: 136rpx;
    height: 48rpx;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 25rpx 0rpx 0rpx 25rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;

    font-size: 26rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
  }

  .money-list {
    width: 690rpx;
    height: 172rpx;
    display: flex;
    margin: 24rpx auto 0;
    position: relative;

    .money-item {
      width: 50%;
      box-sizing: border-box;
      display: flex;
      flex-flow: column nowrap;
      justify-content: center;
      align-items: center;
      padding: 0 60rpx;

      .num {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 36rpx;
        color: #ffffff;
      }

      .title {
        font-family: 光良酒-干杯体, 光良酒-干杯体;
        font-weight: 400;
        font-size: 28rpx;
        color: #ffffff;
      }
    }

    .right {
      width: 32rpx;
      height: 32rpx;
      position: absolute;
      right: 30rpx;
      top: 50%;
      transform: translateY(-50%);
      pointer-events: none;
    }
  }

  .inv-btn {
    margin: 30rpx auto 0;
    width: 490rpx;
    height: 80rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;

    font-family: 光良酒-干杯体, 光良酒-干杯体;
    font-weight: 400;
    font-size: 32rpx;
    color: #ffffff;
    text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000;
  }

  // .card {
  //   margin: 0 auto;
  //   position: relative;
  //   z-index: 1;
  //   width: 710rpx;
  //   height: 464rpx;
  //   box-sizing: border-box;
  //   // border-radius: 20rpx;
  //   // background: #fff;
  //   padding: 1rpx 60rpx 0;

  //   .title-img {
  //     display: block;
  //     margin: 0 auto;
  //   }

  //   .card-title {
  //     font-size: 32rpx;
  //     font-family: zihun152hao-jijiachaojihei;
  //     font-weight: 400;
  //     color: transparent;
  //     text-align: center;

  //     background: linear-gradient(0deg, #85dfff 0%, #ba39ff 100%);
  //     background-clip: text;
  //   }

  //   .card-tip {
  //     font-size: 24rpx;
  //     font-family: Source Han Sans CN;
  //     font-weight: 400;
  //     color: #ffffff;
  //     text-align: center;
  //     margin-top: 10rpx;
  //   }

  //   .people-money {
  //     display: flex;
  //     align-items: center;
  //     justify-content: space-between;
  //     // margin-top: 60rpx;
  //     padding: 40rpx 0 36rpx;
  //     border-radius: 10rpx;
  //     // background: rgba(255, 29, 63, 0.2);
  //     color: #ffffff;
  //     margin-top: 140rpx;

  //     .people,
  //     .moneys {
  //       flex: 1;
  //       font-size: 24rpx;
  //     }
  //     .people {
  //       display: flex;
  //       flex-flow: column nowrap;
  //       align-items: center;

  //       .num {
  //         margin-top: 30rpx;
  //         font-size: 24rpx;
  //         font-weight: 400;
  //         color: #fffffe;

  //         text {
  //           font-size: 28rpx;
  //           color: #fff;
  //           margin-left: 6rpx;
  //         }
  //       }
  //     }

  //     // .line {
  //     //   height: 122rpx;
  //     //   width: 0;
  //     //   border-left: 1px solid rgba(255, 255, 255, 0.3);
  //     // }

  //     .moneys {
  //       display: flex;
  //       align-items: center;
  //       flex-flow: column nowrap;
  //       position: relative;
  //       .content {
  //         display: flex;
  //         flex-flow: column nowrap;
  //         align-items: center;

  //         .money {
  //           margin-top: 30rpx;
  //           font-size: 24rpx;
  //           color: #fffffe;

  //           text {
  //             font-size: 28rpx;
  //             color: #fff;
  //             margin-left: 6rpx;
  //           }
  //         }
  //       }

  //       .icon {
  //         width: 40rpx;
  //         height: 40rpx;
  //         position: absolute;
  //         right: 10rpx;
  //         top: 50%;
  //         transform: translateY(-50%);
  //       }
  //     }
  //   }

  //   .invite-btn {
  //     margin: 30rpx auto 0;
  //     width: 590rpx;
  //     height: 80rpx;
  //     background: linear-gradient(90deg, #6adeff 0%, #7ab5ff 50%, #ff7feb 100%);
  //     border-radius: 40rpx;
  //     display: flex;
  //     justify-content: center;
  //     align-items: center;

  //     font-size: 32rpx;
  //     font-family: Source Han Sans CN;
  //     font-weight: 400;
  //     color: #222222;
  //   }

  //   .tips {
  //     text-align: center;
  //     font-size: 28rpx;
  //   }
  // }

  .invite-log {
    padding: 0 30rpx 20rpx;
    margin: 30rpx auto 0;
    width: 690rpx;
    box-sizing: border-box;

    .list-title {
      text-align: center;
      padding: 30rpx 0;

      font-family: 光良酒-干杯体, 光良酒-干杯体;
      font-weight: 400;
      font-size: 32rpx;
      color: #e40d1d;
      text-shadow: 0 0 2px #ffffff, 0 0 2px #ffffff, 0 0 2px #ffffff,
        0 0 2px #ffffff;
    }

    .list-wrap {
      width: 100%;
      // height: auto;
      // overflow: hidden;

      &-item {
        display: flex;
        flex-flow: column nowrap;
        justify-content: space-evenly;
        box-sizing: border-box;
        padding: 30rpx 0;
        border-bottom: 1rpx solid rgba(255, 255, 255, 0.1);

        .content {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .avatar {
            width: 80rpx;
            height: 80rpx;
            border: 2rpx solid #ffffff;
            border-radius: 50%;
            overflow: hidden;
          }

          .info {
            width: calc(100% - 110rpx);

            &-hd {
              display: flex;
              justify-content: space-between;
              align-items: center;

              font-size: 28rpx;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #fff;

              .name {
                max-width: 300rpx;
              }

              .title {
                font-size: 24rpx;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #fff;
              }
            }

            &-bd {
              margin-top: 10rpx;
              display: flex;
              justify-content: space-between;
              align-items: center;

              font-size: 20rpx;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #fff;

              .money {
                font-size: 26rpx;
              }
            }
          }
        }
      }
    }

    .show-more {
      height: 70rpx;
      display: flex;
      justify-content: center;
      align-items: center;

      .btn {
        display: flex;
        justify-content: center;
        align-items: center;

        font-size: 28rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #999999;

        .icon {
          width: 24rpx;
          height: 24rpx;
          margin-left: 10rpx;
        }
      }
    }
  }
}

.gzbox {
  text-align: right;
}

.gzbox > image {
  width: 143rpx;
  height: 48rpx;
}

.pop {
  width: 607rpx;
  // height: 904rpx;
  padding-top: 70rpx;
  box-sizing: border-box;
  position: relative;

  .pop_title {
    font-size: 36rpx;
    font-family: zihun152hao-jijiachaojihei;
    font-weight: 400;
    color: #ffffff;
    text-align: center;
  }

  .pop_con {
    padding: 30rpx 40rpx 50rpx;
    box-sizing: border-box;

    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 42rpx;
  }

  .close {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 100%);
    width: 50rpx;
    height: 50rpx;
  }
}
</style>
